<template>
    <div>
        <player
            ref="player"
            :playerinfo="playinfo"
            class="components-container"
            :width="detail.style.position.w + 'px'"
            :height="detail.style.position.h + 'px'"
        ></player>
    </div>
</template>
<script>
import player from '@/views/components/player/player.vue';
import {startPlay, closeStream, listChannel} from '@/api/iot/channel';
import BaseView from './View';

export default {
    name: 'view-device-sip',
    extends: BaseView,
    components: {
        player,
    },
    props: {},
    watch: {
        // 获取到父组件传递的device后
        device: function (newVal, oldVal) {
            this.deviceInfo = newVal;
            if (this.deviceInfo.channelId) {
                this.channelId = this.deviceInfo.channelId;
                this.changeChannel();
            }
            if (this.deviceInfo && this.deviceInfo.deviceId !== 0) {
                this.queryParams.deviceSipId = this.deviceInfo.serialNumber;
                this.deviceId = this.device.serialNumber;
            }
        },
    },
    data() {
        return {
            deviceInfo: {},
            deviceId: '',
            channelId: '',
            streamId: '',
            ssrc: '',
            playurl: '',
            playinfo: {playtype: 'play'},
            playrecord: false,
            playrecording: false,
            playing: false,
            pushStream: false,
            retrycount: 0,
            channelList: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                deviceSipId: null,
                channelSipId: null,
            },
        };
    },
    mounted() {
        const this_ = this;
        this.deviceId = this.detail.deviceChannel.deviceSipId;
        this.channelId = this.detail.deviceChannel.channelSipId;
        this.playinfo = {
            playtype: 'play',
            deviceId: this.deviceId,
            channelId: this.channelId,
        };
        setTimeout(function () {
            this_.startPlayer();
        }, 1000);
    },
    beforeDestroy() {
        this.closeDestroy(false);
    },
    methods: {
        /** 查询监控设备通道信息列表 */
        getList() {
            this.loading = true;
            listChannel(this.queryParams).then((response) => {
                this.channelList = response.rows.map((item) => {
                    return {value: item.channelSipId, label: item.channelName};
                });
                console.log(this.channelList);
            });
        },
        changeChannel() {
            this.playinfo.channelId = this.channelId;
            this.startPlayer();
        },
        // 直播播放
        TimeoutCallback() {
            const this_ = this;
            this_.closeDestroy(false);
            this_.retrycount = 0;
            setTimeout(() => {
                this_.startPlayer();
            }, 1000);
        },
        startPushStream() {
            if (!this.channelId) {
                console.log('开始通道: [' + this.channelId + ']');
                return;
            }
            console.log('推流状态: [' + this.pushStream + ']');
            if (this.pushStream) {
                this.startPlayer();
            } else {
                this.closeDestroy(true);
            }
        },
        // 开启直播播放器
        startPlayer() {
            const this_ = this;
            if (!this.channelId) {
                console.log('直播录像通道: [' + this.channelId + ']');
                return;
            }
            if (this.playing) {
                this.closeDestroy(false);
            }

            this_.$nextTick(function (){
                this_.$refs.player.registercallback('loadingTimeout', this_.TimeoutCallback);
                this_.$refs.player.registercallback('delayTimeout', this_.TimeoutCallback);
                startPlay(this_.deviceId, this_.channelId).then((response) => {
                    console.log('开始推流: [' + this_.channelId + ']');
                    const res = response.data;
                    this_.streamId = res.streamId;
                    this_.playurl = res.playurl;
                    this_.$refs.player.play(this_.playurl);
                    this_.playing = true;
                    this_.playrecording = false;
                    this_.pushStream = true;
                });
            })
        },
        closeStream(force) {
            if (force) {
                if (this.playing && this.streamId) {
                    console.log('强制关闭推流: [' + this.streamId + ']');
                    closeStream(this.deviceId, this.channelId, this.streamId).then((res) => {
                        this.streamId = '';
                        this.ssrc = '';
                        this.playurl = '';
                        this.pushStream = false;
                    });
                    this.playing = false;
                    this.playrecording = false;
                }
            } else {
                if (this.playrecording === true) {
                    return;
                }
                if (this.playing && this.streamId) {
                    console.log('关闭推流: [' + this.streamId + ']');
                    closeStream(this.deviceId, this.channelId, this.streamId).then((res) => {
                        this.streamId = '';
                        this.ssrc = '';
                        this.playurl = '';
                        this.pushStream = false;
                    });
                    this.playing = false;
                    this.playrecording = false;
                }
            }
        },
        closeDestroy(force) {
            this.closeStream(force);
            this.$refs.player.destroy();
        },
        destroy() {
            this.$refs.player.destroy();
        },
    },
};
</script>
